<template>
    <el-dialog v-model="props.isShow" title="设置菜单" :show-close="false" :center="true" :before-close="beforeClose" draggable
        @opened="opened" style="width: 500px;height: 200px;">
        <div>
            <el-tree-select ref="tree" style="width: 90%;" v-model="value" :data="store().UserMenus"
                :props="{ children: 'Children', label: 'MenuName', value: 'Id' }" node-key="Id"
                :default-checked-keys="selectArr" :render-after-expand="false" show-checkbox multiple />
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">Cancel</el-button>
                <el-button type="primary" @click="save"> Confirm </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElTree, ElMessage } from 'element-plus'
import store from '../../../store/index'
import MenuRoleRelation from '../../../class/MenuRoleRelations'
import { settingMenu, getMenuRoleRelations } from '../../../http/index'
const value = ref()
const selectArr = ref<string[]>([])
const tree = ref<InstanceType<typeof ElTree>>()
const props = defineProps({
    isShow: Boolean,
    rid: String
})
const opened = async () => {
    var mrlist = await getMenuRoleRelations(props.rid as string) as any as Array<MenuRoleRelation>
    selectArr.value = mrlist.map((item: any) => item.MenuId) as string[]
}
const emits = defineEmits(["closeSetting", "saveSetting"])
const close = () => {
    emits("closeSetting")
}
const save = async () => {
    let mids = tree.value?.getCheckedNodes(false, true).map((item: any) => item.Id).join(",")
    let res = (await settingMenu(props.rid, mids) as any) as boolean
    if (res) {
        emits("saveSetting")
        ElMessage.success("修改成功！")
    }
}
const beforeClose = (done: any) => {
    selectArr.value = []
    emits("closeSetting")
    done(); // 关闭对话框  
}
</script>